@import '../../style/var';

.user {
  position: relative;
  height: 100%;
  width: 100%;
  padding-bottom: 125px;
  background: #fff;
}

// page {
//     height: 100%;
//     background: #F7F7F7;
// }

.space {
  flex: 1;
}

.header {
  position: relative;
  width: 750px;
  height: 300px;
  background: #000;
  z-index: 1;

  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }



  .tip {
    font-size: 34px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(248, 161, 32, 1);
    letter-spacing: 1px;
    text-align: center;
  }

  .header-box {
    // display: flex;
    // align-items: center;
    padding-top: 30px;
  }

  .next {
    margin-right: 24px;
    width: 11px;
    height: 21px;
  }

  .msg1 {
    width: 124px;
    height: 140px;
    // border-radius: 50%;
    margin: 0 auto;
    display: block;
    z-index: 1;
    position: relative;

    .noCover {
      position: absolute;
      top: 20px;
      right: 3px;
      // margin-left: 24px;
      z-index: -1;
      width: 119px;
      height: 119px;
      border-radius: 50%;
      margin: 0 auto;
      display: block;
    }
  }

  .msg {
    width: 100%;

    .mobile {
      width: 100%;
      text-align: center;
      font-weight: 400;
      font-size: 24px;
    }

    .update {
      position: absolute;
      font-size: 26px;
      font-weight: 400;
      right: 36px;
      top: 6px;
    }

    view,
    div {
      font-size: 34px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      // color: rgba(248, 161, 32, 1);
      color: #fff;
      line-height: 48px;
      letter-spacing: 1px;
      @include oneRowOmit;
    }

    .top {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 17px;
    }

    .nickname {
      max-width: 300px;
    }

    .vip {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20px;
      width: 103px;
      height: 28px;
      font-size: 24px;
      font-family: PingFangSC-Regular;
      color: rgba(255, 255, 255, 1);
      letter-spacing: 2px;

      .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
}

.bottom-lang {
  margin-bottom: 125px;
}

.Column {
  position: relative;
  margin-top: -50px;
  z-index: 2;
}

.exchange {
  margin: 24px 0;
}

.specialLine {
  margin: 24px auto;
  width: 702px;
  background: #fff;
}

.line {
  margin: 0 auto;
  width: 654px;
  height: 1px;
  background: rgba(238, 238, 238, 1);
}

.apply-card-wrapper {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.apply-card {
  // position: fixed;
  // bottom: 24px;
  // left: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 702px;
  height: 90px;
  font-size: 30px;
  font-family: PingFangSC-Regular;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
  z-index: 10;
}

.borderDiv {
  width: 100%;
  background-color: #fff;
  // height: 80vh;
  border-radius: 30px 30px 0 0;
  padding: 20px;

  .flexIcon {
    display: flex;
    justify-content: space-around;

    .LinkParent {
      // width: 70px;
      position: relative;
      display: flex;
      text-align: center;

      .line {
        width: 1px;
        height: 73px;
        background-color: black;
        margin-left: 10px;
      }

      .icon {
        width: 44px;
        height: 44px;
      }

      .tittle {
        font-size: 24px;
        margin: 10px;
      }

      .pstittle {
        font-size: 20px;
        color: #727171;
      }

      .card-count {
        position: absolute;
        top: -3px;
        right: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: red;
        color: white;
        border-radius: 50%;
        // padding: 5px;
        font-size: 18px;
        line-height: 1;
        width: 25px;
        height: 25px;
      }
    }

    .longString {
      width: 2px;
      height: 93px;
      background-color: #999;
      margin-top: 20px;
    }
  }
}

.card {
  // width: 100%;
  position: relative;
  height: 424px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  color: #F4EBD7;
  background-size: 100%;
  margin-top: 25px;

  .flexLayout {
    display: flex;
    align-items: center;
  }

  .twoFour3 {
    position: absolute;
    top: 34px;
    right: 62px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 24px;
    color: #DACFBB;
  }

  .iconvip {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 36px;
    right: 169px;
  }

  .distance {
    position: absolute;
    top: 273px;
    left: 63px;
  }

  .twoFour {
    position: absolute;
    top: 80px;
    left: 68px;
    font-size: 24px;
    line-height: 28px;
  }

  .twoFour1 {
    font-size: 24px;
    color: #C2B9A7;
  }

  .twoFour2 {
    font-size: 24px;
    color: #C2B9A7;
  }

  .twoEight {
    position: absolute;
    top: 46px;
    left: 68px;
    font-size: 24px;
    line-height: 28px;
    font-weight: 400;
  }

  .threeSix {
    font-size: 38px;
    margin-right: 20px;
  }
}


.langLine {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  border: 1px solid #fafafa;
  width: 100%;
  padding: 20px 55px;

  .iconAndtext {
    display: flex;

  }

  .icon {
    width: 20px;
    height: 20px;
  }

  .next {
    margin-right: 24px;
    width: 11px;
    height: 21px;
  }

  .icon {
    width: 44px;
    height: 44px;
  }

  .tittle {
    font-size: 24px;
    margin: 10px;
  }

}

.henline {
  width: 100%;
  height: 2px;
  background-color: #f2f2f2;
  margin: 0 55px;
  box-sizing: border-box;
}

.popUp {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 88;

}

.close {
  width: 38px;
  height: 38px;
  position: absolute;
  left: 0;
  right: 0;
  top: 770px;
  bottom: 0;
  margin: auto;
}

.matter {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 99;

  .matter-img {
    width: 636px;
    height: 697px;
    position: absolute;
    left: 0;
    right: 0;
    top: -92px;
    bottom: 0;
    margin: auto;
  }
}